import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
//import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import ClassicEditor from "@novicov/ckeditor5-build-classic-full";
import cookie from 'react-cookies'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';



export default function CkEditor({ handleChange, ...props }) {
    function uploadAdapter(loader) {
        return {
            upload: () => {
                return new Promise((resolve, reject) => {
                    let access_token=cookie.load('access_token')

                    const body = new FormData();
                    body.append("access_token", access_token);
                    loader.file.then((file) => {

                        if (window.FileReader){
                            let filename=file.name;
                            let reader = new FileReader();
                            reader.readAsDataURL(file);
                            //监听文件读取结束后事件
                            reader.onloadend = (e)=> {
                                let fileContentArray=new Array();
                                let fileContent={"content":e.target.result,"name":filename,"contentType":file.type,"size":file.size};
                                fileContentArray.push(fileContent);
                                let entity={
                                    fileContentList:fileContentArray,
                                    currentDirectory:'note/'
                                }
                                body.append("requestJson", JSON.stringify(entity));

                                fetch(`api/objectStore/file/upload`, {
                                    method: "post",
                                    body: body
                                    // mode: "no-cors"
                                })
                                    .then((res) => res.json())
                                    .then((res) => {
                                        resolve({
                                            default: `${res.data[0]}`
                                        });
                                    })
                                    .catch((err) => {
                                        reject(err);
                                    });
                            };
                        }

                        //body.append("files", file);


                    });
                });
            }
        };
    }
    function uploadPlugin(editor) {
        editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
            return uploadAdapter(loader);
        };
    }
    return (
        <div className="App">
            <CKEditor
                config={{
                    language: 'zh-cn',
                    ckfinder: {
                        uploadUrl: '',
                    },

                    extraPlugins: [uploadPlugin]
                }}
                editor={ClassicEditor}
                onReady={(editor) => {}}
                onBlur={(event, editor) => {}}
                onFocus={(event, editor) => {}}
                onChange={(event, editor) => {
                    handleChange(editor.getData());
                }}
                {...props}
            />
        </div>
    );
}
